import React from 'react';
import { getFocusedRouteNameFromRoute, NavigationContainer, RouteProp } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import Home from '@/pages/Home';
import Found from '@/pages/Found';
import Listen from '@/pages/Listen';
import Account from '@/pages/Account';
import { RootStackNavigation, RootStackParamList } from '.';
import IconFont from '@/assets/iconfont';
import HomeTabs from './HomeTabs';

export type BottomTabParamList = {
  HomeTabs: undefined;
  Listen: undefined;
  Found: undefined;
  Account: undefined;
}

const Tab = createBottomTabNavigator<BottomTabParamList>();

//点击底部导航时，改变首页的title
type Route = RouteProp<RootStackParamList, 'BottomTabs'>;

interface IProps {
  navigation: RootStackNavigation;
  route: Route;
}

function getHeaderTitle(route: Route) {
  const routeName = getFocusedRouteNameFromRoute(route);

  switch (routeName) {
    case 'HomeTabs':
      return '首页';
    case 'Listen':
      return '我听';
    case 'Found':
      return '发现';
    case 'Account':
      return '我的';
    default:
      return '首页';
  }
}

class BottomTabs extends React.Component<IProps> {

  componentDidMount() {
    this.setOptions();
  }

  componentDidUpdate() {
    this.setOptions();
  }

  setOptions = () => {
    const { navigation, route } = this.props;
    const routeName = getFocusedRouteNameFromRoute(route);
    console.log('route name: ', routeName);
    if (routeName === 'HomeTabs' || routeName ===  undefined) {
      navigation.setOptions({
        headerTransparent: true,
        headerTitle: '',
      })
    } else {
      navigation.setOptions({
        headerTransparent: false,
        headerTitle: getHeaderTitle(route),
      })
    }
  }

  render() {
    return (
      <Tab.Navigator tabBarOptions={{ activeTintColor: '#f86442' }}>
        <Tab.Screen name="HomeTabs" options={{
          tabBarLabel: '首页',
          tabBarIcon: ({ color, size }) => <IconFont name="icon-home" color={color} size={size}></IconFont>
        }} component={HomeTabs} />
        <Tab.Screen name="Listen" options={{
          tabBarLabel: '我听',
          tabBarIcon: ({ color, size }) => <IconFont name="icon-add" color={color} size={size}></IconFont>
        }} component={Listen} />
        <Tab.Screen name="Found" options={{
          tabBarLabel: '发现',
          tabBarIcon: ({ color, size }) => <IconFont name="icon-faxian" color={color} size={size}></IconFont>
        }} component={Found} />
        <Tab.Screen name="Account" options={{
          tabBarLabel: '我的',
          tabBarIcon: ({ color, size }) => <IconFont name="icon-wode" color={color} size={size}></IconFont>
        }} component={Account} />
      </Tab.Navigator>
    );
  }
}

export default BottomTabs;